<template>
	<view>
	<!-- 	<view class="">
			<img src="@/static/study.jpg" alt="" style="width: 100%;height: 100%;" />
		</view> -->
		<view class="stu-tip">
			{{infoData.nickName}}
		</view>
		<view class="stu-tip">
			手机号：{{maskPhoneNumber(infoData.userName)}}
		</view>
		<view class="stu-form">
			<u-form>
				<u-form-item label-width="200rpx" label="" :required="true">
					<u-input v-model="form.phone" placeholder="请填写手机号后四位" />
				</u-form-item>
			</u-form>
			<u-button @click="submit" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		userById,userBindWx
	} from '@/utils/api.js';
	import {
		parseQueryString,
		maskPhoneNumber
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				phone: '',
				codeText: '',
				name: '',
				id: '',
				maskPhoneNumber,
				infoData: {			nickName: '',
					phone: ''
				},
				form: {
					userId: '',
					code: '',
					phone: ''
				}
			}
		},
		onLoad(e) {
			this.info()
		},
		methods: {
			async submit() {
				if (this.form.phone !== this.infoData.userName.slice(-4)) {
					uni.showToast({
						title: '手机号后四位错误',
						icon: 'none'
					})
					return;
				}
				try {
					uni.showLoading()
					await userBindWx(this.form)
					uni.showToast({
						title: '绑定成功',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}

				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1000)
			},
			async info() {
				this.getQuery()
				const {
					data
				} = await userById({id:this.form.userId})
				this.infoData = data
			},
			getQuery() {
				const query = parseQueryString(location.search)
				this.form.code = query.code
				this.form.userId = query.state
			},
			groupChange(e) {
				// console.log(e);
			},
			codeChange(text) {
				this.codeText = text;
			},

		},
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style>
	.top-left {
		margin-top: 50rpx;
		margin-left: 20rpx;
	}

	.left-title {
		font-size: 34rpx;
		font-weight: bold;
	}

	.title-intro {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.stu-tip {
		margin-top: 30rpx;
		margin-left: 20rpx;
		font-weight: bold;
	}

	.stu-form {
		width: 90%;
		margin: 0 auto;
	}
</style>